<!DOCTYPE HTML>
<html>
<head>
	<meta charset="utf-8">
	<title>Badge 徽章</title>
	<link rel="stylesheet" href="../static/css/element2.css">
	<script src="../static/js/vue.global.prod.js"></script>
	<script src="../static/js/element-plue2.js"></script>
	<script src="../static/js/icons-vue.js"></script>
	<link rel="stylesheet" href="../static/css/com.css">
<style>
.item {
  margin-top: 10px;
  margin-right: 40px;
}
.el-dropdown {
  margin-top: 1.1rem;
}
</style>
</head>
<body>
<div id="app" class="">
	<el-divider content-position="left">基础用法</el-divider><!-- =============================================================== -->
	<p class="desc">可以用来展示新消息的数量。</p>
	<p class="desc">通过设置 value 来调整标记所展示的内容，支持 Number or String 作为参数</p>
	<el-badge :value="12" class="item"><el-button>comments</el-button></el-badge>
	<el-badge :value="3" class="item"><el-button>replies</el-button></el-badge>
	<el-badge :value="3" class="item" :hidden="is_hidden"><el-button>hidden</el-button></el-badge>
	<el-badge :value="1" class="item" type="primary"><el-button>comments</el-button></el-badge>
	<el-badge :value="2" class="item" type="warning"><el-button>replies</el-button></el-badge>
	<el-dropdown trigger="click">
		<span class="el-dropdown-link">
			Click Me <el-icon class="el-icon--right"><caret-bottom /></el-icon>
		</span>
		<template #dropdown>
			<el-dropdown-menu>
				<el-dropdown-item class="clearfix">comments <el-badge :value="12" class="mark"></el-badge></el-dropdown-item>
				<el-dropdown-item class="clearfix"><el-badge :value="3" class="mark">replies </el-badge></el-dropdown-item>
			</el-dropdown-menu>
		</template>
	</el-dropdown>
	
	<el-divider content-position="left">最大值</el-divider><!-- =============================================================== -->
	<p class="desc">你还可以自定义最大值</p>
	<p class="desc">由max属性定义，它接受一个Number， 要注意的是，该值当且仅当在 value 的值也是 Number 时生效。</p>
	<el-badge :value="200" :max="99" class="item"><el-button>comments</el-button></el-badge>
	<el-badge :value="100" :max="10" class="item"><el-button>replies</el-button></el-badge>
	
	
	<el-divider content-position="left">自定义显示内容</el-divider><!-- =============================================================== -->
	<p class="desc">你也可以展示除数字以外你想要展示的任何值。</p>
	<p class="desc">当 value 是一个 String 类型当时候，你可以展示任何你想展示的内容。</p>
	<el-badge value="new" class="item"><el-button>comments</el-button></el-badge>
	<el-badge value="hot" class="item"><el-button>replies</el-button></el-badge>
	
	<el-badge value="hot__8" class="item"><el-button>自定义</el-button></el-badge>
	<el-badge value="转" class="item">
		<el-badge value="hot" class="item"><el-button>自定义</el-button></el-badge>
	</el-badge>
	
	<el-divider content-position="left">小红点</el-divider><!-- =============================================================== -->
	<p class="desc">通过一个小红点标记来告知用户有新内容</p>
	<p class="desc">除了数字外，设置is-dot属性 ，它接受一个Boolean 类型作为参数。</p>
	<el-badge is-dot class="item">query</el-badge>
	<el-badge is-dot hidden class="item">hidden</el-badge>
	<el-badge is-dot class="item"><el-button class="share-button" :icon="Icons.Share" type="primary"></el-button></el-badge>
	
</div>

</body>
<script>
const Main = {
	data() {
		return {
			Icons: ElementPlusIconsVue,
			is_hidden: true,
			
		}
	},
	methods:{
		fn(){
			this.message = "欢迎来到HTML中文网。";
		},
		hello(par){
			this.message = "参数值为：" + par;
		}
	}
}

const app = Vue.createApp(Main);
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
	app.component(key, component)
}
app.use(ElementPlus);
app.mount("#app");

</script>
</html>